<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>${menuDetail.name}</title>
<#include "/admin/main/include/link_head.ftl"/>
</head>

<body class="jr-body">
<div class="jr-main-content">
<@tags.editBtns btns="close" />
    <div style="margin-top: 70px;"></div>
    <div class="wrapper">
        <div class="row">
            <div class="col-md-4">
            <@tags.treetable id="easyui-datagrid-left" options="
            url:'groupTreeAll?gid=${group.id}',
            onSelect:'onLeftSelect',
            idField:'id',
            treeField:'name',
            pagination:false,
            onContextMenu:'onLeftContextMenu',
            singleSelect:true">
                <@tags.th options="field:'ck',checkbox:true"></@tags.th>
                <@tags.th options="field:'name',width:120,formatter:'uiLink',sortable:false"><@spring.message '角色名称' /></@tags.th>
                <@tags.th options="field:'isShow',width:80,formatter:'uiParam',sortable:false,align:'center'"><@spring.message '是否显示' /></@tags.th>
            </@tags.treetable>
            <@tags.gridBtns id="tbMain" btns="search,add,remove,sort,export" urls="add:'roleEdit?gid=${group.id}'" />
            <@tags.gridCons gridId="easyui-datagrid-left" forms="[
                        {
                            type:'text',
                            field:'name',
                            op:'like',
                            text:'角色名称'
                        }
                    ]" />
                <div id="mm" class="easyui-menu" style="width:120px;">
                    <div data-options="iconCls:'icon-add'"><@spring.message '增加子角色' /></div>
                </div>
            </div>
            <div class="col-md-8">
            <@tags.treetable id="easyui-datagrid-right" options="toolbar:'#tbSlave',
            url:'groupPageMenuTree',
            idField:'id',
            pagination:false,
            striped:false,
            selectOnCheck:false,
            checkOnSelect:false,
            onCheck:'onRightCheck',
            onUncheck:'onRightUncheck',
            onCheckAll:'onRightCheckAll',
            onUncheckAll:'onRightUncheckAll',
            treeField:'name'">
                <@tags.th options="field:'ck',checkbox:true,sortable:false"></@tags.th>
                <@tags.th options="field:'name',width:400,sortable:false,align:'left'"><@spring.message '菜单名称' /></@tags.th>
                <@tags.th options="field:'op',width:80,sortable:false,align:'center',formatter:'uiOp'"><@spring.message '菜单名称' /></@tags.th>
            </@tags.treetable>
            <@tags.gridBtns id="tbSlave" btns="export" />
            </div>
        </div>

    </div>
</div>
</body>
</html>
<#include "/admin/main/include/link_foot.ftl"/>
<script type="text/javascript">
    function onLeftSelect(rowData) {
        $("#easyui-datagrid-right").treegrid("load", {
            'roleId': rowData.id
        });
    }
    function uiOp(value, row, index) {
        var htm = '<button id="powerSet' + row.id + '" ';
        if (row.cked != true && row.cked != 'true') {
            htm += ' disabled="disabled" ';
        }
        htm += 'class="btn btn-primary btn-sm powerSet" type="button"';
        htm += 'onclick="doEditPower(\'' + row.id + '\')"><@spring.message '权限设置' /></button>';
        return htm;
    }
    function doEditPower(id) {
        var role = $("#easyui-datagrid-left").treegrid("getSelected");
        win("editPower?roleId=" + role.id + "&menuDetailId=" + id + "&mid=${menuDetail.id}");
    }
    function onRightCheck(rowData) {
        var role = $("#easyui-datagrid-left").treegrid("getSelected");
        $.post("addPower", {
            roleId: role.id,
            idStr: rowData.id
        });
        $("#powerSet" + rowData.id).removeAttr("disabled");
    }
    function onRightUncheck(rowData) {
        var role = $("#easyui-datagrid-left").treegrid("getSelected");
        $.post("deletePower", {
            roleId: role.id,
            idStr: rowData.id
        });
        $("#powerSet" + rowData.id).attr("disabled", "disabled");
    }
    function onRightCheckAll(rows) {
        var role = $("#easyui-datagrid-left").treegrid("getSelected");
        var checked = $("#easyui-datagrid-right").treegrid("getChecked");
        if (null != checked && checked.length > 0) {
            var idStr = "";
            for (var i = 0; i < checked.length; i++) {
                idStr += checked[i].id + ",";
                $("#powerSet" + checked[i].id).removeAttr("disabled");
            }
            idStr = idStr.substring(0, idStr.length - 1);
            $.post("addPower", {
                roleId: role.id,
                idStr: idStr
            })
        }
    }
    function onRightUncheckAll(rows) {
        var role = $("#easyui-datagrid-left").treegrid("getSelected");
        $.post("clearPower", {
            roleId: role.id
        });
        $(".powerSet").attr("disabled", "disabled");
    }
    function onLeftContextMenu(e, row) {
        if (row) {
            e.preventDefault();
            $(this).treegrid('select', row.id);
            $('#mm').menu('show', {
                left: e.pageX,
                top: e.pageY,
                onClick: addLeftMenu
            });
        }
    }
    function addLeftMenu(item) {
        var selected = $("#easyui-datagrid-left").treegrid("getSelected");
        if (null != selected) {
            win("edit.do?pid=" + selected.id + "&mid=${menuDetail.id}");
        }
    }
</script>